<template>
  <div class="meishi-xiangqing">
    <div class="xiangqing-header">
      <!--<router-link :to="{name: 'shouye/muying'}">-->
      <img @click="Back()" class="back" src="../../assets/img/shouye/header-xinpin/back.png"/>
      <!--</router-link>-->
      <p>打造玫瑰般娇嫩肌肤</p>
      <img @click="isFX = true" class="share" src="../../assets/img/shouye/header-xinpin/share.png"/>
    </div>
    <img src="../../assets/img/shouye/shouye/lunbodazao.png"/>
    <h3>
      <p>
        Rose Hydrosed是一款来自澳大利亚的护肤产品，主
        要功能为深层滋润肌肤，锁住水分，打造玫瑰般娇嫩肌
        肤...
      </p>
      <p>下面为您推荐一些产品</p>
    </h3>
    <ul class="shangpin-ul">
      <li>
        <h2 class="fenlei-ul" v-if="isShow">
          <h3>所有分类</h3>
          <span>防晒</span>
          <span>爽肤水x精华</span>
          <span>乳液×面霜</span>
          <span>卸妆水</span>
          <span>散粉蜜粉</span>
          <span>眼妆</span>
          <span>面膜</span>
          <span>粉饼×粉霜</span>
        </h2>
        <div class="lunbo-rank">
          <h3>
            <h4 class="first">
              <img src="../../assets/img/shouye/shouye/no1.png"/>
              <h5>
                防晒类 &nbsp; 第<span>1</span>位
                <p></p>
                <p></p>
              </h5>
            </h4>
            <h5 class="meifubao">
              <img src="../../assets/img/shouye/shouye/lunboxiangqing.png" alt="">
              <h5>
                <h5>美肤宝</h5>
                <p>
                  守护肌肤预防紫外线所引发的斑点以及胶原蛋白变形等，是具有抗老保养效果的全效防晒霜
                </p>
                <h6>
                  立即购买
                  <span></span>
                </h6>
              </h5>
            </h5>
          </h3>
        </div>
        <h1 class="fenlei-xiala">
          <ul class="meizhuang-ul">
            <li>防晒</li>
            <li>爽肤水×精华</li>
            <li>
              乳液×面霜<img @click="isShow = !isShow" src="../../assets/img/shouye/tuijian-xuanliyanzhuang/下拉.png" height="14" width="25"/></li>
          </ul>
        </h1>
        <h3><span></span>往期上榜<span></span></h3>
        <ul>
          <li>
            <ul class="list-ul">
              <li>
                <img src="../../assets/img/shouye/shouye/BBshuang.png"/>
                <p>蜗牛饰容BB霜50g</p>
                <h5>￥12.90</h5>
                <h6>立即购买</h6>
              </li>
              <li>
                <img src="../../assets/img/shouye/shouye/BBshuang.png"/>
                <p>蜗牛饰容BB霜50g</p>
                <h5>￥12.90</h5>
                <h6>立即购买</h6>
              </li>
            </ul>
          </li>
          <li>
            <ul class="list-ul">
              <li>
                <img src="../../assets/img/shouye/shouye/BBshuang.png"/>
                <p>蜗牛饰容BB霜50g</p>
                <h5>￥12.90</h5>
                <h6>立即购买</h6>
              </li>
              <li>
                <img src="../../assets/img/shouye/shouye/BBshuang.png"/>
                <p>蜗牛饰容BB霜50g</p>
                <h5>￥12.90</h5>
                <h6>立即购买</h6>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <div class="fenxiang-mengban" v-if="isFX">
      <div class="fenxiang">
        <ul>
          <li>
            <ul class="fenxiang-list">
              <li>
                <div>
                  <img src="../../assets/img/shouye/fenxiang/pengyouquan.png"/>
                </div>
                <p>微信朋友圈</p>
              </li>
              <li>
                <div>
                  <img src="../../assets/img/shouye/fenxiang/weixin.png" /></div>
                <p>微信好友</p>
              </li>
              <li>
                <div>
                  <img src="../../assets/img/shouye/fenxiang/QQ.png"/></div>
                <p>QQ好友</p>
              </li>
            </ul>
          </li>
          <li>
            <ul class="fenxiang-list">
              <li>
                <div>
                  <img src="../../assets/img/shouye/fenxiang/QQkongjian.png"/></div>
                <p>QQ空间</p>
              </li>
              <li>
                <div>
                  <img src="../../assets/img/shouye/fenxiang/weibo.png" /></div>
                <p>微博</p>
              </li>
              <li>
                <div>
                  <img src="../../assets/img/shouye/fenxiang/fuzhilianjie.png"/></div>
                <p>复制链接</p>
              </li>
            </ul>
          </li>
        </ul>
        <div @click="quxiao()">
          取消
        </div>
      </div>
    </div>
    <div class="up" @click="toTop()" v-if="isUP">
      <img src="../../assets/img/shouye/tuijian-xuanliyanzhuang/toTop.png"/>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isShow: false,
        isUP: false,
        isFX: false
      }
    },
    methods: {
      Back() {
        this.$router.go(-1);
      },
      quxiao () {
        this.isFX = false
      },
      toTop () {
        if(document.documentElement){
          document.documentElement.scrollTop = 0;
        }else{
          document.body.scrollTop = 0;
        }
      },
      menu() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        if(this.scroll > 0){
          //显示 a 标签
          this.isUP = true;
        }else{
          //隐藏 a 标签
          this.isUP = false;
        }
      },
      top () {
        window.scrollTo(0,0)
      }
    },
    mounted() {
      window.addEventListener('scroll', this.menu)
    },
    created () {
      this.top();
    }
  }
</script>
<style scoped>
  .meishi-xiangqing {
    background: #feeaf5;
    position: relative;
    width: 100%;
    padding-top: 2rem;
  }

  .meishi-xiangqing > img {
    width: 100%;
  }

  .meishi-xiangqing > h3 {
    padding: 0.5rem 0 0.1rem 0.5rem;
    font-family: MicrosoftYaHei;
    font-size: 0.7rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #4d4d4d;
    background: #fff;
  }
  .meishi-xiangqing > h3 > p {
    margin-bottom: 0.2rem;
  }
  .xiangqing-header {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    background: #e53e42;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .back {
    vertical-align: middle;
    width: 0.6rem;
    margin-left: 0.5rem;
  }

  .xiangqing-header > p {
    width: 12.5rem;
    height: 100%;
    text-align: center;
    display: inline-block;
    font-family: MicrosoftYaHei;
    font-size: 0.7rem;
    font-weight: normal;
    font-stretch: normal;
    color: #ffffff;

  }

  .meishi-xiangqing .share {
    vertical-align: middle;
    width: 1rem;
  }

  .xiangqing-header ul li {
    height: 1.3rem;
  }

  .xiangqing-header ul li img {
    width: 0.6rem;
    height: 0.6rem;
    vertical-align: middle;
  }

  .xiangqing-header ul li span {
    font-family: MicrosoftYaHei;
    font-size: 0.5rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
  }

  .shangpin-ul {
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.5rem;
  }
  .shangpin-ul > li {
    position: relative;
    width: 100%;
  }

  .shangpin-ul > li div {
    width: 15rem;
    display: flex;
    background-color: #fdf3f1;
    padding: 0.5rem;
  }

  .shangpin-ul > li div img {
    padding: 0.2rem;
    width: 4.5rem;
    height: 8rem;
    background: #fff;
    display: inline-block;
  }

  .shangpin-ul > li div h3 {
    padding: 0.2rem;
    background: #fff;
    flex: 1;
  }

  .shangpin-ul > li div h3 h4 {
    font-family: MicrosoftYaHei;
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #4e1f1d;
    margin: 0.1rem 0;
  }

  .shangpin-ul > li div h3 p {
    font-family: MicrosoftYaHei;
    font-size: 0.6rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #4d4d4d;
  }
  .shangpin-ul>li>h3{
    text-align: center;
    font-size: 0.9rem;
    color: #4d4d4d;
    margin-bottom: 0.1rem;
    background-color: #e8b2d0;
    padding: 0.3rem 0;
    font-weight: normal;
    font-stretch: normal;
  }
  .shangpin-ul>li>h3 span {
    display: inline-block;
    width: 1rem;
    height: 0.3rem;
    border-top: 1px solid #4d4d4d;
    margin: 0 0.3rem;
  }
  .lunbo-rank .first {
    display: flex;
  }
  .lunbo-rank .first img {
    width: 2rem;
    height: 2rem;
  }
  .lunbo-rank .first h5 {
    font-size: 0.8rem;
    flex: 1;
    color: #c46c25;
    letter-spacing: 0.05rem;
    margin-left: 0.5rem;
    font-weight: normal;
    font-stretch: normal;
  }
  .lunbo-rank .first h5 span {
    font-size: 1rem;
  }
  .lunbo-rank .first p {
    width: 10rem;
    border: 1px solid #c46c25;
    margin-top: 0.4rem;
  }
  .lunbo-rank .meifubao {
    display: flex;
  }
  .lunbo-rank .meifubao img{
    width: 3rem;
    height: 3rem;
    padding: 1rem 0.5rem;
    border: 1px solid #ccc;
  }
  .lunbo-rank .meifubao h5 {
    flex: 1;
    margin-left: 0.3rem;
  }
  .lunbo-rank .meifubao h5 h5 {
    font-size: 0.8rem;
    color: #4d4d4d;
    font-weight: normal;
    font-stretch: normal;
  }
  .lunbo-rank .meifubao h5 p {
    font-size: 0.5rem;
    color: #808080;
  }
  .lunbo-rank .meifubao h5 h6 {
    text-align: center;
    line-height: 1rem;
    width: 4rem;
    height: 1rem;
    background-color: #e53e42;
    font-size: 0.6rem;
    color: white;
    font-weight: normal;
    font-stretch: normal;
  }
  .lunbo-rank .meifubao h5 h6 span {
    display: inline-block;
    border: 0.25rem solid white;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    margin: 0.2rem 0 0 0.3rem;
  }
  .shangpin-ul .meizhuang-ul {
    display: flex;
    background: #fff;
    margin: 0.5rem 0;
    padding: 0.3rem 0;
  }
  .shangpin-ul .meizhuang-ul li {
    text-align: center;
    flex: 1;
    font-size: 0.8rem;
    color: #4d4d4d;
    font-weight: normal;
    font-stretch: normal;
  }
  .shangpin-ul .meizhuang-ul li:nth-child(2) {
    border-left: 1px solid #4d4d4d;
    border-right: 1px solid #4d4d4d;
  }
  .shangpin-ul .meizhuang-ul li img {
    width: 0.8rem;
    height: 0.4rem;
    vertical-align: middle;
  }
  /*分类下拉定位*/
  /*.fenlei-xiala */
  .fenlei-ul {
    padding: 0.5rem;
    background: white;
    position: absolute;
    top: 11.3rem;
    left: 0;
    border: 1px solid #ccc;
  }

  /*.fenlei-xiala */
  .fenlei-ul h3{
    color: #808080;
    font-size: 0.8rem;
    font-weight: normal;
    font-stretch: normal;
  }
  /*.fenlei-xiala */
  .fenlei-ul{
  }
  /*.fenlei-xiala */
  .fenlei-ul span {
    font-size: 0.8rem;
    color: #4d4d4d;
    word-wrap: break-word;
    word-break: keep-all;
    font-weight: normal;
    font-stretch: normal;
  }
  .list-ul {
    display: flex;
    padding: 0 0.5rem;
  }

  .list-ul li {
    flex: 1;
    text-align: center;
    border: 1px solid #ccc;
    margin: 0.4rem 0.2rem;
    background: #fff;
  }

  .list-ul li img {
    padding-top: 0.5rem;
    width: 2rem;
    height: 4rem;
  }

  .list-ul li p {
    padding: 0 0.5rem;
    font-family: SimHei;
    font-size: 0.5rem;
    font-weight: normal;
    font-stretch: normal;
    color: #000000;
  }

  .list-ul li h5 {
    font-family: SimHei;
    font-size: 0.6rem;
    font-weight: normal;
    font-stretch: normal;
    color: #e83d41;
  }

  .list-ul li h6 {
    margin: 0.2rem auto;
    width: 5rem;
    background-color: #e53e42;
    border-radius: 0.5rem;
  }
  .up {
    width: 1.5rem;
    position: fixed;
    bottom: 0;
    right: 0.3rem;
  }
  .up img {
    width: 100%;
  }
  .fenxiang-mengban {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: rgba(0,0,0,0.5);
  }
  .fenxiang {
    padding-top: 1rem;
    background: #fff;
    width: 100%;
    height: 10rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .fenxiang-list {
    display: flex;
  }
  .fenxiang-list li {
    flex: 1;
    text-align: center;
  }
  .fenxiang-list div {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem auto;
  }
  .fenxiang-list div img {
    width: 100%;
  }
  .fenxiang-list p {
    font-size: 0.6rem;
    font-weight: normal;
    font-stretch: normal;
    color: #4d4d4d;
  }
  .fenxiang>div {
    font-size: 0.6rem;
    font-weight: normal;
    font-stretch: normal;
    background: #e53e42;
    color: #fff;
    width: 3rem;
    text-align: center;
    padding: 0.2rem;
    border-radius: 0.2rem;
    margin: 0.5rem auto;
  }
</style>
